<template>
  <div id="selfCard">
    <header-nav linkUrl="selfCardRecord" linkText="售卡记录" :me-card="agentMsg.cardnum"></header-nav>
    <x-switch class="switch" title="是否开启自助售卡" :value-map="[0, 1]" @click.native="onSwitch" v-model="intval"></x-switch>
    <group class="agent_box">
      <p>已售卡数:<span>{{agentMsg.sellcardnum}}张</span></p>
      <p>账户余额:<span>{{agentMsg.moneynum}}元</span></p>
      <p>冻结资金:<span>{{agentMsg.frozen_money}}元</span></p>
      <p>剩余房卡:<span>{{agentMsg.cardnum}}张</span></p>
      <flexbox class="btn_box">
        <flexbox-item>
          <x-button link="buyCard" type="primary">购买房卡</x-button>
        </flexbox-item>
        <flexbox-item>
          <x-button class="blue" type="primary" @click.native="getQrcode">售卡二维码</x-button>
        </flexbox-item>
      </flexbox>
    </group>
    <group class="flow_box">
      <h3>自动售卡流程</h3>
      <p>点击我的二维码 --> 截图二维码 --> 分享给好友 --> 好友可以直接扫描二维码进入购卡界面购买房卡</p>
      <p>点击复制链接按钮 --> 自动复制售卡链接 --> 分享给好友 --> 好友可以直接点击购卡链接直接购买</p>
      <flexbox class="btn_box">
        <flexbox-item>
          <me-copy class="copy-btn" btn-id="copy" :message="link" text="点我复制"></me-copy>
        </flexbox-item>
        <flexbox-item>
          <x-button class="blue" type="primary" @click.native="addSlogan">添加标语</x-button>
        </flexbox-item>
      </flexbox>
    </group>
    <h3 class="attention">注:所有加赠房卡均有官方赠出，不扣除代理商房卡</h3>
    <modal-box class="selfModal" ref="modal" @on-confirm="confirm">
      <div slot="modal__bd">
        <div class="modal_agent__box">
          <h3><span>代理名称: </span>{{agentMsg.nickname}}</h3>
          <h3><span>代理ID: </span>{{agentMsg.uid}}</h3>
        </div>
        <!-- 生成二维码 -->
        <me-qrcode v-if="link" :qr-url='link' :qr-size='200' :qr-logo-size="40"  :qr-logo="logo"></me-qrcode>
        <p class="modal_dec">扫一扫上面的二维码，购买房卡</p>
      </div>
    </modal-box>
  </div>
</template>

<script>
import { Group, XButton, XSwitch, Flexbox, FlexboxItem } from "vux";
import headerNav from "../../../components/header/headerNav";
import modalBox from "../../../components/common/modalBox";
import meCopy from "../../../components/common/meCopy";
import meQrcode from "../../../components/common/meQrcode";
import logo from "../../../images/logo.png";
export default {
  data() {
    return {
      intval:null, //默认关闭
      agentMsg: {}, //代理信息
      logo: logo,
      link:'', //售卡链接
    };
  },
  created() {
    this.getAgentMsg();
  },
  components: {
    headerNav,
    Group,
    XButton,
    XSwitch,
    Flexbox,
    FlexboxItem,
    modalBox,
    meCopy,
    meQrcode
  },
  methods: {
    getAgentMsg() {
      this.apiService.user.sellcard().then(res => {
        this.agentMsg = res.data;
        this.intval = this.agentMsg.autosalecard
        let host = window.location.host
        this.link = `${host}/home/salecard?uid=${this.agentMsg.link_uid}`
      });
    },
    onSwitch() {
      let autosale = this.intval ? 0 : 1;
      this.apiService.user
        .editsellcard({
          autosalecard: autosale
        })
        .then(res => {
          this.intval = autosale;
          this.$refs.modal.opens("alert", this.COMPANY_GAME_NAME, res.msg);
        });
    },
    getQrcode() {
      //弹出弹框显示//设置弹框遮罩层样式
      this.$refs.modal.opens("alert", "", "");
      this.$refs.modal.setMaskClass("maskBack");
    },
    addSlogan() {
      //调用组件中的方法
      this.$refs.modal.opens("confirm", "请在下方输入标语", "最多输入20字");
    },
    confirm() {
      //获取表单值
      let sloganText = this.$refs.modal.getVal()
      this.apiService.user
        .slogan({
          slogan: sloganText
        })
        .then(res => {
          this.$refs.modal.opens("alert", this.COMPANY_GAME_NAME, res.msg);
        });
    }
  }
};
</script>
<style scoped>
#selfCard .blue {
  background: #108ee9;
}
#selfCard {
  height: 100%;
}
.agent_box p {
  width: 50%;
  margin: 0 auto;
  padding: 0.1rem 0;
  font-size: 0.3rem;
  color: rgb(100, 100, 100);
}
.agent_box p span {
  margin-left: 0.25rem;
  color: #000;
}
.switch {
  background-color: #fff;
}
#selfCard .switch::before {
  left: 0;
}
#selfCard .btn_box {
  margin-top: 0.2rem;
  padding: 0 0.1rem;
}

.flow_box h3 {
  font-size: 0.35rem;
}

.flow_box p {
  font-size: 0.25rem;
  line-height: 0.5rem;
  color: #999;
  padding: 0.3rem 0;
}

.attention {
  padding: 0.45rem 0.2rem;
  font-size: 0.3rem;
  background-color: #fff;
  color: rgb(247, 93, 93);
  text-align: center;
}

.selfModal .modal__bd .modal_agent__box,
.selfModal .modal_dec {
  color: #000;
  padding-top: 0.3rem;
}
.selfModal .modal__bd .modal_agent__box h3 {
  margin: 0.2rem 0;
  font-size: 0.35rem;
  text-align: left;
  font-weight: 600;
}
</style>
<style>
#selfCard .agent_box .weui-cells,
#selfCard .flow_box .weui-cells {
  margin: 0;
  padding: 0.35rem 0.3rem;
}
#selfCard .flow_box .weui-cells:before {
  border: none;
}
.selfModal .active {
  background: rgb(102, 102, 102);
}
#selfCard .maskBack {
  background: rgb(102, 102, 102);
}
#selfCard .copy-btn .copy_btn {
  background-color: #108ee9;
}
</style>
